<template>
	<view class="register-container">
		<view class="register-card">
			<view class="register-title">用户注册</view>

			<view class="form-group">
				<input type="text" class="form-input" placeholder="请输入用户名"
					:class="{ 'has-error': registerError.username }" v-model="registerData.username" />
				<view class="error-message" v-if="registerError.username">{{ registerError.username }}</view>
			</view>

			<view class="form-group">
				<input type="password" class="form-input" placeholder="请输入密码"
					:class="{ 'has-error': registerError.password }" v-model="registerData.password" />
				<view class="error-message" v-if="registerError.password">{{ registerError.password }}</view>
			</view>

			<view class="form-group">
				<input type="password" class="form-input" placeholder="请再次输入密码"
					:class="{ 'has-error': registerError.confirmPassword }"
					v-model="registerData.confirmPassword" />
				<view class="error-message" v-if="registerError.confirmPassword">{{ registerError.confirmPassword }}</view>
			</view>

			<button class="register-button" :disabled="isRegistering || !isRegisterFormValid" @click="handleRegister">
				{{ isRegistering ? '注册中...' : '注册' }}
			</button>

			<view class="login-link" @tap="goToLogin">
				已有账号？<text class="login-text">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Register',
		data() {
			return {
				registerData: {
					username: '',
					password: '',
					confirmPassword: ''
				},
				registerError: {
					username: '',
					password: '',
					confirmPassword: ''
				},
				isRegistering: false
			}
		},
		computed: {
			isRegisterFormValid() {
				return (
					this.registerData.username &&
					this.registerData.password &&
					this.registerData.password === this.registerData.confirmPassword
				)
			}
		},
		methods: {
			validateRegisterForm() {
				const errors = {
					username: '',
					password: '',
					confirmPassword: ''
				}

				if (!this.registerData.username) {
					errors.username = '请输入用户名'
				} else if (this.registerData.username.length < 3) {
					errors.username = '用户名长度至少为3个字符'
				}

				if (!this.registerData.password) {
					errors.password = '请输入密码'
				} else if (this.registerData.password.length < 6) {
					errors.password = '密码长度至少为6个字符'
				}

				if (!this.registerData.confirmPassword) {
					errors.confirmPassword = '请确认密码'
				} else if (this.registerData.confirmPassword !== this.registerData.password) {
					errors.confirmPassword = '两次输入的密码不一致'
				}

				this.registerError = errors
				return Object.values(errors).every(msg => !msg)
			},
			async handleRegister() {
			  if (!this.validateRegisterForm()) return; // 前端校验
			
			  this.isRegistering = true;
			  this.registerError = {};
			
			  try {
			    const result = await uniCloud.callFunction({
			      name: 'user-auth',
			      data: {
			        action: 'register',
			        username: this.registerData.username.trim(),
			        password: this.registerData.password,
			        confirmPassword: this.registerData.confirmPassword
			      }
			    });
			
			    if (result.result.code === 201) {
			      uni.showToast({
			        title: '注册成功，即将跳转登录页',
			        icon: 'success',
			        duration: 1500
			      });
			      // 注册成功后跳转到登录页
			      setTimeout(() => {
			        uni.navigateBack() // 假设登录页在注册页的上一层
			      }, 1500);
			    } else if (result.result.code === 400) {
			      uni.showToast({
			        title: result.result.msg,
			        icon: 'none',
			        duration: 2000
			      });
			    } else if (result.result.code === 409) {
			      this.registerError.username = result.result.msg;
			    } else {
			      uni.showToast({
			        title: result.result.msg || '注册失败，请重试',
			        icon: 'none',
			        duration: 2000
			      });
			    }
			  } catch (error) {
			    console.error('注册请求失败:', error);
			    uni.showToast({ title: '网络错误', icon: 'none' });
			  } finally {
			    this.isRegistering = false;
			  }
			},
			goToLogin() {
				// 跳转到登录页面
				uni.navigateBack() // 假设登录页在注册页的上一层
			}
		}
	}
</script>

<style>
	/* 注册页面样式 */
	.register-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		padding: 0 1rem;
	}

	.register-card {
		width: 100%;
		max-width: 320px;
		padding: 1.5rem;
		background-color: #ffffff;
		border-radius: 0.5rem;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	.register-title {
		margin-bottom: 1.5rem;
		font-size: 1.25rem;
		font-weight: 600;
		text-align: center;
		color: #1f2937;
	}

	.form-group {
		margin-bottom: 1rem;
	}

	.form-input {
		width: 100%;
		height: 2.5rem;
		padding: 0 0.75rem;
		border: 1px solid #e5e7eb;
		border-radius: 0.375rem;
		background-color: #ffffff;
		font-size: 1rem;
		color: #1f2937;
		transition: all 0.2s ease;
		box-sizing: border-box;
	}

	.form-input:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
	}

	.form-input.has-error {
		border-color: #ef4444;
	}

	.error-message {
		margin-top: 0.25rem;
		font-size: 0.875rem;
		color: #ef4444;
	}

	.register-button {
		width: 100%;
		height: 2.5rem;
		margin-top: 0.5rem;
		background-color: #10b981;
		border-radius: 0.375rem;
		color: #ffffff;
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
		border: none;
	}

	.register-button:disabled {
		background-color: #94a3b8;
		cursor: not-allowed;
	}

	.register-button:not(:disabled):hover {
		background-color: #059669;
	}

	.register-button:not(:disabled):active {
		background-color: #047857;
	}

	.login-link {
		margin-top: 1rem;
		text-align: center;
		font-size: 0.875rem;
		color: #6b7280;
	}

	.login-text {
		color: #3b82f6;
		text-decoration: underline;
		cursor: pointer;
	}
</style>